<template>
  <div class="homeBox">
    <h2>{{ msg }}</h2>

    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
    <!-- 
// 整个代码分成三部分  
第一部分 模板 
第二部分 js  
第三部分css  -->
  </div>
</template>

<script>
//默认导出

export default {
  data() {
    return {
      msg: "我是home组件",
      list: ["vue", "vue2", "vue3"],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>


<style scoped   lang='css'>
/* // scoped   自己的样式只在自己的组件里内生效  不会影响 其他的组件  */

.homeBox h2 {
  background-color: red;
}
</style>
